<template>
    <div v-show="$store.state.businessUser.nickname">
<!--        <router-view></router-view>-->
        <div class="business-tittle">
            <h3>{{$store.state.systemMessage.brand}}后台管理</h3><div v-show="$store.state.businessUser.nickname"><span>您好: {{$store.state.businessUser.nickname}}</span><el-button class="business-tittle-btn" type="primary" @click="signOut">退出</el-button></div>
        </div>
        <div class="business-body">
            <div class="business-nav" ref="nav">
            <el-menu
                    default-active="1-4-1"
                    class="el-menu-vertical-demo"
                    :router="true"
                    :collapse="isCollapse"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b"
            >
                <el-menu-item class="open" @click.native="open" style="background-color: rgb(72, 81, 100);">|||</el-menu-item>
                <el-submenu index="0" v-show="$store.state.businessUser.isSuper">
                    <template slot="title">
                        <i class="iconfont icon-zhanghu"></i>
                        <span slot="title">账户管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="/business/addaccount">操作账户</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="1" v-show="$store.state.businessUser.jurisdiction.includes('商品管理')">
                    <template slot="title">
                        <i class="iconfont icon-shangpin"></i>
                        <span slot="title">商品管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="/business/allgoods"> 全部商品</el-menu-item>
                        <el-menu-item index="/business/goodsubject">商品分类</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="2" v-show="$store.state.businessUser.jurisdiction.includes('订单管理')">
                    <template slot="title">
                        <i class="iconfont icon-dingdan"></i>
                        <span slot="title">订单管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="/business/orders"> 订单管理</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="3" v-show="$store.state.businessUser.jurisdiction.includes('客服')">
                    <template slot="title">
                        <i class="iconfont icon-V"></i>
                        <span slot="title">在线客服</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="/business/chat"> 客服功能</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="4" v-show="$store.state.businessUser.jurisdiction.includes('系统设置')">
                    <template slot="title">
                        <i class="iconfont icon-shezhi"></i>
                        <span slot="title">系统设置</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="/business/baseSet">基础设置</el-menu-item>
                        <el-menu-item index="/business/notice">系统公告</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </el-menu>
            </div>
            <div class="business-view" ref="view">
                <keep-alive>
                   <router-view></router-view>
                </keep-alive>
               <div v-show="$route.path === '/business'">
                   <h2> 欢迎来到{{$store.state.systemMessage.brand}}后台管理</h2>
                   <p>公告:</p>
                   <div v-for="(item, index) in notices" :key="index" class="released">
                       <h6>{{item.title}}</h6>
                       <div class="content">{{item.content}}</div>
                       <div class="notice-writed">
                           <p>作者：{{item.author}}</p>
                           <p>时间：{{item.date}}</p>
                       </div>
                   </div>
               </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {sendwithpost} from "../../network/profile";

    export default {
        name: "Business",
        data() {
            return {
                isCollapse: false,
                notices: []
            }
        },
        created() {
                sendwithpost({
                    url: '/getBusinessUser',
                }).then(res=> {
                    this.$store.commit('updateBusinessUser', res.data.businessUser)
                    if (this.$store.state.businessUser.jurisdiction.includes('客服')) {
                        this.$socket.emit('businessLogn',this.$store.state.businessUser._id )
                    }
                    if (!res.data.businessUser.nickname) {
                        this.$message({
                            showClose: true,
                            message: '请先登录',
                            type: 'warning'
                        })
                        this.$router.push({path: '/business/signIn'})
                    }
                })
                this.$store.dispatch('getGoodsType')
                this.getData()

        },
        methods: {
            open() {
                this.isCollapse = !this.isCollapse
                if (this.isCollapse) {
                    this.$refs.view.style.marginLeft = 64 + 'px'
                    this.$refs.nav.style.width = 64 + 'px'
                }else {
                    this.$refs.view.style.marginLeft = 200 + 'px'
                    this.$refs.nav.style.width = 200 + 'px'
                }
            },
            signOut() {
                let uId = this.$store.state.businessUser._id
                sendwithpost({
                    url: '/businessSignOut'
                }).then(res=> {
                    this.$store.commit('businessSignOut')
                    this.$message({
                        showClose: true,
                        message: '退出成功',
                        type: 'success'
                    })
                    this.$router.push({path: '/business/signIn'})
                    this.$socket.emit('disconnect', uId)
                })
            },
            getData() {
                sendwithpost({
                    url: '/getNotice'
                }).then(res=> {
                    if (res.data.res_code == 2) {
                        this.notices = res.data.data.reverse()
                    }else {
                        this.$message({
                            showClose: true,
                            message: res.data.message,
                            type: res.data.type
                        })
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .business-tittle {
        height: 80px;
        background-color: rgb(55, 60, 65);
        display: flex;
        justify-content: space-around;
        color: #ffffff;
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        z-index: 9;
    }
    .business-tittle-btn {
        height: 40px;
        margin-top: 20px;
        margin-left: 20px;
    }
    .business-body {
        display: flex;
        justify-content: space-between;
    }
    .business-nav {
        background-color: #545c64;
        max-width: 200px;
        overflow: hidden;
        position: fixed;
        left: 0;
        top: 80px;
        height: 100vh;
    }
    .business-view {
        padding: 40px;
        flex: 1;
        background-color: rgb(236, 239, 244);
        min-height: 100vh;
        margin-top: 80px;
        margin-left:  200px;
    }
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 280px;
    }
    .open {
        text-align: center;
        height: 30px;
        line-height: 30px;
        font-size: 12px;
    }
    .released {
        border: 1px #999999 dashed;
        padding: 10px 40px;
        line-height: 1.5em;
        font-weight: 700;
        margin: 1em 0;
    }
    .released .content {
        margin: 2px 0;
    }
    .released .notice-writed {
        font-size: 14px;
        text-align: right;
    }
</style>